<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- cornerstone css - provides some useful css classes -->
    <link href="../../dist/cornerstone.css" rel="stylesheet">

</head>
<body>
<div class="container">

    <h1>
        viewport/index.html
    </h1>
    This example demonstrates setting various viewport settings when the image is first enabled to
    focus on a tumor in the image.
    <br>
    <br>

    <div id="dicomImage" style="width:512px;height:512px;"
         class="cornerstone-enabled-image"
         oncontextmenu="return false"
         unselectable='on'
         onselectstart='return false;'
         onmousedown='return false;'>
    </div>

</div>
</body>

<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="../jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<script>

    $(document).ready(function() {
        var viewportOptions = {
            scale: 6.0,
            translation: {
                x: -24,
                y: 10
            },
            voi: {
                windowWidth: 89,
                windowCenter: 150
            },
            invert: false,
            pixelReplication: false
        };
        var element = document.getElementById('dicomImage');
        cornerstone.enable(document.getElementById('dicomImage'));
        cornerstone.loadImage("example://1").then(function (image) {
            cornerstone.displayImage(element, image, viewportOptions);
        });
    });
</script>

</html>
